<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <a-form-model
        ref="ruleForm"
        :model="settingForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-form-model-item label="轮播广告图片">
          <cyyUploadImg @uploadSuccess="successCb" imgSizeText="702*172" @deleteImg="deleteCb" :imgList.sync="settingForm.polling" dataType="list">
          </cyyUploadImg>
        </a-form-model-item>
        <a-form-model-item label="积分说明" prop="explain">
          <WangEditor :value="content" @change="(e) => (settingForm.explain = e)"></WangEditor>
          <a-textarea :hidden="true" v-model="settingForm.explain" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24 }">
          <a-divider style="margin: 0 0 40px 0" />
          <div style="display: flex; justify-content: center">
            <a-button :loading="btnLoading" type="primary" @click="saveSetting" style="margin-right: 8px">
              保存
            </a-button>
            <a-button @click="$router.back()"> 取消 </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { WangEditor } from '@/components'
import { cyyUploadImg } from '@/components/CyyUi'
import { storeSetting,getStoreSetting } from '@/api/plugin/integral'
export default {
  components: {
    WangEditor,
    cyyUploadImg,
  },
  data() {
    return {
      settingForm: {
        // 轮播广告图片
        polling: [],
        // 积分说明
        explain: '',
      },
      // 验证规则
      rules: {
        explain: [{ required: true, message: '请输入积分说明', trigger: 'blur' }],
      },
      // 富文本内容
      content: '',
    }
  },
  methods: {
    // 上传图片成功
    successCb(data) {
      if (data.data.length) {
        this.settingForm.polling = [...this.settingForm.polling, ...data.data]
      }
    },
    // 删除图片回调
    deleteCb(data) {
      console.log(data)
      this.settingForm.polling.splice(data.index, 1)
    },
    // 保存设置
    saveSetting() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await storeSetting(this.settingForm)
          if(res.code == 0) {
            this.$message.success('保存成功')
          }
        } else {
          return false
        }
      })
    },
    // 获取设置
    async getSetting() {
      const res = await getStoreSetting()
      if(res.code == 0 && res.data) {
        this.settingForm = res.data
        this.content = res.data.explain
      }
    }
  },
  created() {
    this.getSetting()
  },
}
</script>


<style lang="less" scoped>
</style>
